<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能测试用例生成系统</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="/static/css/style.css" as="style">
    
    <!-- 预加载测试用例管理页面资源 -->
    <link rel="prefetch" href="/teacher">
    <link rel="prefetch" href="/static/css/teacher.css">
    
    <!-- CSS资源 - 使用本地资源 -->
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
    <!-- 现代化导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-modern fixed-top">
        <div class="container">
            <a class="navbar-brand-modern" href="#home">
                <i class="fas fa-code"></i>
                <span>智能测试用例生成系统</span>
            </a>
            
            <div class="navbar-nav-modern">
                <a class="nav-link-modern" href="#features">功能特性</a>
                <a class="nav-link-modern" href="#analyzer">智能分析</a>
                <a class="nav-link-modern" href="/teacher">测试用例管理</a>
                <a class="nav-link-modern" href="#statistics">统计信息</a>
                
                <!-- 用户信息区域 -->
                <div id="userInfo" class="user-info" style="display: none;">
                    <div class="user-dropdown">
                        <span class="user-name" id="userDisplayName">用户名</span>
                        <span class="dropdown-arrow">▼</span>
                        <div class="dropdown-menu">
                            <a href="/teacher" class="dropdown-item">
                                <span class="fa fa-cog"></span> 测试用例管理
                            </a>
                            <a href="/new-test-case" class="dropdown-item">
                                <span class="fa fa-plus"></span> 新建测试用例
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item" onclick="logout()">
                                <span class="fa fa-sign-out"></span> 退出登录
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 登录按钮 -->
                <a id="loginBtn" class="nav-link-modern" href="/login">
                    <span class="fa fa-sign-in"></span> 登录
                </a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="home" class="hero-section-modern">
        <div class="container">
            <div class="hero-content text-center">
                <h1 class="hero-title">智能测试用例生成系统</h1>
                <p class="hero-subtitle">基于NLP和机器学习的程序设计题目分析与测试用例自动生成平台</p>
                <a href="#analyzer" class="btn hero-button">
                    <i class="fas fa-rocket me-2"></i>
                    开始智能分析
                </a>
            </div>
        </div>
    </section>

    <!-- 功能特性 - 紧凑型展示 -->
    <section id="features" class="features-section-compact">
        <div class="container">
            <h2 class="features-title">核心功能特性</h2>
            <div class="row g-3">
                <div class="col-lg-4 col-md-4">
                    <div class="feature-card-compact">
                        <div class="feature-icon-compact">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h4 class="feature-title-compact">智能分析</h4>
                        <p class="feature-description-compact">
                            使用NLP技术自动理解编程题目描述，识别问题类型和约束条件
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="feature-card-compact">
                        <div class="feature-icon-compact">
                            <i class="fas fa-vials"></i>
                        </div>
                        <h4 class="feature-title-compact">测试用例生成</h4>
                        <p class="feature-description-compact">
                            自动生成边界值、等价类、随机等多种类型的测试用例
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="feature-card-compact">
                        <div class="feature-icon-compact">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h4 class="feature-title-compact">机器学习增强</h4>
                        <p class="feature-description-compact">
                            集成机器学习模型，提高问题识别准确率
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 智能分析器 - 紧凑型展示 -->
    <section id="analyzer" class="analyzer-section">
        <div class="container">
            <div class="analyzer-container-large">
                <h2 class="analyzer-title">智能分析器</h2>
                
                <!-- 输入区域 -->
                <div class="input-card">
                    <div class="input-header">
                        <i class="fas fa-edit me-2"></i>
                        输入编程题目
                    </div>
                    <div class="input-body">
                        <form id="analysisForm">
                            <div class="mb-4">
                                <label for="problemText" class="form-label fw-semibold">请输入编程题目描述</label>
                                <textarea class="form-control form-control-modern" id="problemText" rows="10" 
                                          placeholder="请详细描述编程题目，包括输入输出格式、约束条件等..."></textarea>
                            </div>
                            
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="testCaseCount" class="form-label fw-semibold">测试用例数量</label>
                                    <input type="number" class="form-control form-control-modern" id="testCaseCount" 
                                           value="10" min="1" max="50">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" id="useML">
                                        <label class="form-check-label fw-semibold" for="useML">
                                            启用机器学习增强
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex gap-3 justify-content-end">
                                <button type="button" class="btn btn-secondary-modern" id="loadSample">
                                    <i class="fas fa-file-alt me-2"></i>
                                    加载示例
                                </button>
                                <button type="submit" class="btn btn-primary-modern">
                                    <i class="fas fa-search me-2"></i>
                                    开始分析
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 加载状态 -->
                <div class="loading-modern" id="loadingSection" style="display: none;">
                    <div class="spinner-modern"></div>
                    <p class="text-muted">正在分析题目，请稍候...</p>
                </div>

                <!-- 分析结果 -->
                <div id="analysisResult" class="analysis-result-modern" style="display: none;">
                    <div class="result-header">
                        <i class="fas fa-chart-line"></i>
                        <span>分析结果</span>
                    </div>
                    
                    <!-- 问题信息网格 -->
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-label">问题类型</div>
                            <div class="info-value" id="problemType">-</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">识别置信度</div>
                            <div class="info-value" id="confidenceText">0%</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">约束条件</div>
                            <div class="info-value" id="constraintCount">0</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">测试用例</div>
                            <div class="info-value" id="testCaseCountResult">0</div>
                        </div>
                    </div>

                    <!-- 测试用例列表 -->
                    <div class="mb-4">
                        <h5 class="mb-3">
                            <i class="fas fa-list me-2"></i>
                            生成的测试用例
                        </h5>
                        <div id="testCasesList"></div>
                    </div>

                    <!-- 导出和保存选项 -->
                    <div class="d-flex gap-3 flex-wrap">
                        <button class="btn btn-primary" id="saveCurrentTestCases">
                            <i class="fas fa-save me-2"></i>
                            保存测试用例
                        </button>
                        <button class="btn btn-success" id="exportJson">
                            <i class="fas fa-download me-2"></i>
                            导出JSON
                        </button>
                        <button class="btn btn-info" id="exportPython">
                            <i class="fas fa-code me-2"></i>
                            导出Python
                        </button>
                        <button class="btn btn-secondary" id="exportMarkdown">
                            <i class="fas fa-file-alt me-2"></i>
                            导出Markdown
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计信息 - 紧凑型展示 -->
    <section id="statistics" class="statistics-section">
        <div class="container">
            <div class="statistics-container-large">
                <h2 class="statistics-title">系统统计信息</h2>
                <div class="row g-4" id="statisticsContent">
                    <div class="col-12 text-center">
                        <button class="btn btn-primary-modern" id="loadStatistics">
                            <i class="fas fa-chart-bar me-2"></i>
                            加载统计信息
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 登录提示模态框 -->
    <div id="loginPromptModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3><span class="fa fa-exclamation-triangle"></span> 需要登录</h3>
                <span class="close" onclick="closeLoginPromptModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p>保存测试用例需要先登录系统。</p>
                <p>请点击下方按钮前往登录页面。</p>        
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeLoginPromptModal()">取消</button>
                <button type="button" class="btn btn-primary" onclick="goToLogin()">前往登录</button>
            </div>
        </div>
    </div>

    <!-- 预加载JavaScript资源 -->
    <link rel="preload" href="/static/js/main.js?v=final" as="script">
    
    <!-- 主页面JavaScript -->
    <script src="/static/js/main.js?v=final"></script>
</body>
</html>